<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="myplugs/css/checkbox.css">
	</head>

	<body style="background-color: white;">

		<div class="panel panel-default" style="margin: 40px;padding-top: 50px;">
			<div class="panel-header">
				分配权限
			</div>
			<div class="panel-body">
				<div id="dvpagecontent" style="padding: 10px; width: 80%; margin: 0px auto;">
					<div class="content-box">
						<div class="content-box-content">
							<form action="sysfun/shareSysfun.action" method="post">

								<input name="roleId" value="201" type="hidden">

								<div style="overflow: hidden; margin: 20px auto;">
									<span class="parentChk spcheckboxCheck">
												<input value="1" checked="checked" name="sysfunids" class="subchk" type="checkbox">&nbsp;<label class="labelfor">
													人事管理
												</label> </span>

									<div style="margin: 40px auto 10px 30px; clear: both; overflow: hidden;width:800px;">

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="3" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	部门管理
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="4" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	员工管理
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

									</div>
								</div>

								<div style="overflow: hidden; margin: 20px auto;">
									<span class="parentChk spcheckboxCheck">
												<input value="5" checked="checked" name="sysfunids" class="subchk" type="checkbox">&nbsp;<label class="labelfor">
													日程管理
												</label> </span>

									<div style="margin: 40px auto 10px 30px; clear: both; overflow: hidden;width:800px;">

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="6" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	我的日程
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="7" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	部门日程
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

									</div>
								</div>

								<div style="overflow: hidden; margin: 20px auto;">
									<span class="parentChk spcheckboxCheck">
												<input value="9" checked="checked" name="sysfunids" class="subchk" type="checkbox">&nbsp;<label class="labelfor">
													系统管理
												</label> </span>

									<div style="margin: 40px auto 10px 30px; clear: both; overflow: hidden;width:800px;">

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="10" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	角色管理
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="11" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	登录日志
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

									</div>
								</div>

								<div style="overflow: hidden; margin: 20px auto;">
									<span class="parentChk spcheckboxCheck">
												<input value="14" checked="checked" name="sysfunids" class="subchk" type="checkbox">&nbsp;<label class="labelfor">
													考勤管理
												</label> </span>

									<div style="margin: 40px auto 10px 30px; clear: both; overflow: hidden;width:800px;">

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="15" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	考勤统计
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="16" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	考勤历史记录
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

									</div>
								</div>

								<div style="overflow: hidden; margin: 20px auto;">
									<span class="parentChk spcheckboxCheck">
												<input value="21" checked="checked" name="sysfunids" class="subchk" type="checkbox">&nbsp;<label class="labelfor">
													消息传递
												</label> </span>

									<div style="margin: 40px auto 10px 30px; clear: both; overflow: hidden;width:800px;">

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="22" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	消息管理
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

										<div style="width: 195px; padding 5px; float: left;">
											<span class="childChk spcheckboxCheck">
																<input checked="checked" value="23" name="sysfunids" class="subchk" type="checkbox">&nbsp;&nbsp;<label class="labelfor">
																	信箱
																</label> </span>

										</div>
										<div style="float: left; margin: 5px; border-right: 1px solid #efefef; padding: 10px;">

										</div>

									</div>
								</div>

								<input style="display: inline-block; margin-bottom: 0; padding: .5em 1em; vertical-align: middle; font-size: 1.0rem; font-weight: 400; line-height: 1.2; text-align: center; white-space: nowrap; background-image: none; border: 1px solid transparent; border-radius: 0; color: #fff; background-color: #5eb95e; border-color: #5eb95e;" value="分配权限" type="submit">
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

	<script src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		$(function() {
			//父级选中 子集联动
			$(".parentChk")
				.click(function() {

					if(!$(this).hasClass("spcheckbox")) { //如果取消
						$(this).next().find(".childChk,.childchildChk").removeClass(
							"spcheckboxCheck");
						$(this).next().find(".childChk,.childchildChk").addClass("spcheckbox");
						$(this).next().find(".subchk").removeAttr("checked");
						$(this).removeClass("spcheckboxCheck");
						$(this).addClass("spcheckbox");
						$(this).children(0).removeAttr("checked");
					} else {
						$(this).next().find(".childChk,.childchildChk").removeClass(
							"spcheckbox");
						$(this).next().find(".childChk,.childchildChk").addClass(
							"spcheckboxCheck");
						$(this).next().find(".subchk").attr("checked",
							"checked");
						$(this).removeClass("spcheckbox");
						$(this).addClass("spcheckboxCheck");
						$(this).children(0).attr("checked", "checked");
					}
				});

			$(".childChk").click(function() {
				if($(this).hasClass("spcheckbox")) { //如果子元素取消选中
					var part = $(this).parent().parent();
					part.siblings().removeClass("spcheckbox");
					part.siblings().addClass("spcheckboxCheck");
					part.siblings().find(".subchk").attr("checked", "checked");
					$(this).removeClass("spcheckbox");
					$(this).addClass("spcheckboxCheck");
					$(this).children(0).attr("checked", "checked");
				} else {
					var part = $(this).parent().parent();
					$(this).removeClass("spcheckboxCheck");
					$(this).addClass("spcheckbox");
					$(this).children(0).removeAttr("checked");
					if(part.find(".spcheckboxCheck").length == 0) {
						part.siblings().removeClass("spcheckboxCheck");
						part.siblings().addClass("spcheckbox");
						part.siblings().find(".subchk").removeAttr("checked");
					}
				}
			}); //---------------//子集选中或者取消 父级联动选中或者取消

			$(".childchildChk").click(function() {
				if($(this).hasClass("spcheckbox")) {
					var part = $(this).parent().parent();
					$(this).removeClass("spcheckbox");
					$(this).addClass("spcheckboxCheck");
					$(this).children(0).attr("checked", "checked");
				} else {
					$(this).removeClass("spcheckboxCheck");
					$(this).addClass("spcheckbox");
					$(this).children(0).removeAttr("checked");
				}
			});
		});
	</script>

</html>